<template>
  <div class="default-main ba-table-box">
    <div class="block">
      <div class="table-block">
        <el-alert class="ba-table-alert"
                  v-if="baTable.table.remark"
                  :title="baTable.table.remark"
                  type="info"
                  show-icon />
        <!-- 表格顶部菜单 -->
        <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
                     :quick-search-placeholder="t('Quick search placeholder', { fields: '订单号' })">
        </TableHeader>

        <el-row style="margin: 10px 0;"
                :gutter="10">
          <el-col :span="1.5"
                  v-if="baTable.auth('export')">
            <el-button type="warning"
                       @click="exportExcelOperate"
                       :loading="state.buttonLoading">
              <Icon color="#ffffff"
                    name="el-icon-Position" />导出
            </el-button>
          </el-col>
          <el-col :span="1.5"
                  v-if="baTable.auth('exportinfo')">
            <el-upload ref="upload"
                       class="upload-demo"
                       action=""
                       :show-file-list="false"
                       @change="onUpload"
                       :auto-upload="false">
              <template #trigger>
                <el-button type="primary">上传达人管理文件</el-button>
              </template>
              <el-link style="color: #ffffff;"
                       :href="`${baseUrl}/storage/system/expertManage.xls`"
                       :underline="false">
                <el-button type="warning"
                           style="margin-left: 10px;vertical-align: initial;">
                  下载达人管理模板
                </el-button>
              </el-link>
            </el-upload>
          </el-col>
        </el-row>

        <Table></Table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, provide } from 'vue'
import baTableClass from '/@/utils/baTable'
// import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { baTableApi, fileDownload } from '/@/api/common'
import Cookies from 'js-cookie'
import { useI18n } from 'vue-i18n'
import { ElMessage, ElMessageBox } from 'element-plus'
import { fileUpload, exportExcel } from '/@/api/backend/expertManagement/expertManage'
import { getUrl } from '/@/utils/axios'

defineOptions({
    name: 'expertManagement/expertManage',
})
const { t } = useI18n()
const baseUrl = getUrl()
const state: {
    buttonLoading: boolean
} = reactive({
    buttonLoading: false
})

const baTable = new baTableClass(
    new baTableApi('/expertManagement/expertManage/'),
    {
        column: [
            {  
                label: '网红名称', 
                prop: 'name', 
                align: 'center',
                operator: 'LIKE',
                operatorPlaceholder: t('Please input field', { field: '网红名称' })
            },
            {  
                label: 'Tiktok ID', 
                prop: 'tiktok_id', 
                align: 'center',
                operator: false
            },
            {  
                label: '主页链接', 
                prop: 'home_link', 
                align: 'center',
                operator: false
            },
            {  
                label: 'linktree链接', 
                prop: 'linktree_link', 
                align: 'center',
                operator: false
            },
            {  
                label: '邮箱', 
                prop: 'Mailbox', 
                align: 'center',
                operator: false
            },
            {  
                label: 'whatsapp', 
                prop: 'whatsapp', 
                align: 'center',
                operator: false
            },
            {  
                label: '店铺', 
                prop: 'shop', 
                align: 'center',
                operator: false
            },
            {  
                label: '短视频内容方向', 
                prop: 'ShortVideoContentDirection', 
                align: 'center',
                operator: false
            },
            {  
                label: '是否做直播领域(是/否)', 
                prop: 'IsItInTheFieldOfLiveStreaming', 
                align: 'center',
                operator: false
            },
            {  
                label: '合作方式(免费/付费)', 
                prop: 'CollaborationMethod', 
                align: 'center',
                operator: false
            },
            {  
                label: '总付费金额', 
                prop: 'TotalPaymentAmount', 
                align: 'center',
                operator: false
            },
            {  
                label: '累计带货金额', 
                prop: 'AccumulatedAmountOfGoodsCarried', 
                align: 'center',
                operator: false
            }
        ],
        dblClickNotEditColumn: ['all']
    }
)

provide('baTable', baTable)

baTable.mount()
baTable.getIndex()

const onUpload = (file:any) => {
    let fd = new FormData()
    fd.append('file', file.raw)
    fileUpload(fd).then((res) => {
        if (res.code == 200) {
            ElMessage ({
                type: 'success',
                message: res.msg,
            })
            baTable.onTableHeaderAction('refresh', {})
        } else {
            ElMessage ({
                type: 'error',
                message: '上传失败',
            })
        }
    })
}

const exportExcelOperate = () => {
    state.buttonLoading = true
    baTable.table.loading = true
    ElMessageBox.confirm(
        '是否确认导出所有数据项?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        type keymaps = {
            [key: string]: string | number
        }
        const obj:keymaps = {}
        baTable.table.filter?.search!.forEach(v => {
            obj[v.field] = v.val
        }) || []
        exportExcel('post', obj).then(response => {
            fileDownload(response, Cookies.get('filename') || 'file.xlsx')
        }).catch(err => {
            state.buttonLoading = false
            baTable.table.loading = false
        }).finally(() => { 
            state.buttonLoading = false
            baTable.table.loading = false
        })
        state.buttonLoading = false
        baTable.table.loading = false
    }).catch(() => {
        state.buttonLoading = false
        baTable.table.loading = false
    })
}

</script>

<style scoped lang="scss">
</style>